import React, { Component } from 'react'

export default class App extends Component {

    //通过 bind 传参 ,接收的时候前面是传递的参数,后面是 event 事件对象
    add = function (val, event) {
        console.log(111111111111, this);
        console.log(val);
    }

    //只有在运行时执行一次,后期点击是无法被调用的,无法传参
    reduce = (val) => {
        console.log(val,this);
        // console.log('123213123');
    }
    render() {
        return (
            <div>
                <button onClick={this.add.bind(this, 10)}>事件传参 1--------可以传值</button>

                {/* 
                    1.如果外部写一个函数,我们调用的时候需要执行,
                    如果加了 () ,默认会在运行时执行一次,
                    后期点击无法被执行
                    2.如果不加 () , 每次点击的时候可以正常执行,但是没有办法传参
                */}
                <button onClick={this.reduce(10)}>事件传参 2</button>


                {/* 可以在点击事件中,手动的来调用 reduce ,此时相传什么参数直接传即可  */}
                <button onClick={() => {
                    this.reduce(100)
                }}>事件传参 3 -----------可以传参----推荐写法</button>


                {/* 如果外部是一个普通函数,我们这里通过 this.add 来调用,
                    相当于 add 函数 是由 this 调用的,所以函数中是可以正常获取到  this 的
                */}
                <button onClick={() => {
                    this.add(1000)
                }}>事件传参 4 -------可以传参</button>



                {/* 
                    定义事件:

                        普通函数:
                         需要手动绑定 this,可以在this的后面加参数
                         直接在事件监听的时候自己手动调用函数且传递参数

                        箭头函数:
                            如果直接调用传参,该函数只会被执行一次,所以无法触发多次
                            直接在事件监听的时候自己手动调用函数且传递参数
                */}

            </div>
        )
    }
}
